<script setup>

import loading from '@/assets/images/code_loading.gif'

const uuid = defineModel()

const imageUrl = ref('')

async function getCode() {
  const { success, imageUuid, imageCode } = await useRequest('GetImageCode', )
  imageUrl.value = success ? `data:image/png;base64,${imageCode}` : ''
  uuid.value = success ? imageUuid : ''
}
getCode()

defineExpose(
  { getCode },
)
</script>

<template>
  <div class="ml-2 w-30 cursor-pointer" @click="getCode">
    <img
      v-if="!imageUrl"
      class="loading-image h-10 w-full"
      :src="loading"
      title="图形验证码加载中..."
    >
    <img
      v-else
      class="code-image h-8 w-full"
      :src="imageUrl"
      alt="验证码"
    >
  </div>
</template>

<style scoped lang='scss'></style>
